<div id="app">
    <admin-page-header back>
        <bi-button icon="fa-save" @click="save"  type="primary">保存</bi-button>
    </admin-page-header>
    
    <div class="container">
        <bi-form ref="form">
        <div class="row g-2">
            <div class="col-12">
                <bi-card title="栏目信息">
                  
                        <bi-form-item label="栏目名称" >
                            <bi-input v-model="form.title" placeholder="请输入栏目名称" required></bi-input>
                        </bi-form-item>

                        <bi-form-item label="上级栏目" >
                            <web-part root v-model="form.parent_id" required :disabled-list="disabledList"   ></web-part>
                        </bi-form-item>

                        <bi-form-item label="路由链接" >
                            <web-route  v-model="form.route" v-model:type="form.route_type"  :parent-part="form.parent_id" ></web-route>
                        </bi-form-item>
 
                        <bi-form-item label="栏目模板" v-if="form.route_type!='link'" >
                            <web-template v-model="form.part_template" ></web-template>
                        </bi-form-item>
                        <bi-form-item label="栏目模型" >
                            <web-model v-model="form.part_model_id" type="part" ></web-model>
                        </bi-form-item>
                </bi-card>
            </div>

            <div class="col-12" v-if="form.part_model_id">
                <bi-card title="栏目参数"  >
                    <web-model-param ref="param" :model="form.part_model_id"  :data="param" ></web-model-param>
                </bi-card>
            </div>
            <div class="col-12" v-if="form.route_type!='link'">
                <bi-card title="文章参数">
                    <bi-form-item label="文章模板" >
                        <web-template v-model="form.article_template" ></web-template>
                    </bi-form-item>
                    <bi-form-item label="文章模型" >
                        <web-model v-model="form.article_model_id" type="article" ></web-model>
                    </bi-form-item>
                </bi-card>
            </div>
            
        </div>
    </bi-form>
    </div>
</div>


<script>
import webPart from 'field/part.vue';
import webModel from 'field/model.vue';
import webRoute from 'field/route.vue';
import webModelParam from 'field/model-param.vue';
import webTemplate from 'field/template.vue';
import modelListDialog from 'model/list-dialog.vue';
let app = admin.createApp({
    components:{
        webPart,
        webModel,
        webModelParam,
        webRoute,
        webTemplate
    },
    data(){

        let form = {
            part_id:'',
            title:'',
            parent_id:0,
            type:'page',
            route:"",
            route_type:'default',
            part_template:'',
            article_template:'',
            brief:'',
            content:'',
            part_model_id:'',
            article_model_id:'',
        }

        let param = {};


        this.$assign(form, this.$pageData.part);
        
        let disabledList = [];
        if (form.part_id!=''){
            disabledList.push(form.part_id);
        }

        if (this.$pageData.param) param = this.$pageData.param;

        return {
            form,
            param,
            disabledList,
            parentUrl:''
        }
    },
    watch:{
        form:{
            handler(value){
               
            },            
            deep:true,
            immediate:true
        }
    },
    methods:{
        save(){

            let param = {};

            if (this.$refs.param) param = this.$refs.param.getData();

            if (this.form.route_type=='root' || this.form.route_type=='parent'){
                if (this.form.route==''){
                    this.$alert('路由不能为空');
                    return ;
                }
            }

            if (this.form.route_type=='link' && this.form.route==''){
                this.$alert('链接不能为空');
                return ;
            }



            if (this.$refs.form.check()){
 
                if (this.form.part_model_id=='' ||  this.$refs.param.check()){
                    
                    this.$ajax({
                    url:this.$url({action:'save'}),
                    data:{
                        ...this.form,
                        param
                    },
                    success:(res)=>{
                            this.$user.delLocalStorage('web-part-input');
                            this.$go(-1);
                        }
                    });

                }
            }

        },
        modelList(){
            this.$dialog({
                type:'vue',
                content:admin.createApp(modelListDialog,{type:'part'})
            });
        },
    }
}).mount('#app');
</script>